<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, PointLayer, LayerSwitch, HeatmapLayer } from '@antv/l7'

const options: any = ref({
    center: [88.6, 36.9],
    zoom: 1.5,
    projection: '',
    pitch: 60
})
const handleLoaded = async (scene: Scene) => {
    // csv
    // 渲染成动态点
    const data = await fetch('/csv/launch_sites.csv').then(res => res.text())
    const pointLayer = new PointLayer({ name: '点_动效' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('circle')
        .active(true)
        .animate(true)
        .size(56)
        .color('#4cfd47')
        .style({
            raisingHeight: 30  // 抬升高度 
        })

    // 点渲染为对应字段的文字
    const pointTextLayer = new PointLayer({ name: '点_文字' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('FullName', 'text')
        .active({ color: 'yellow' })
        .size(16)
        .color('#006dff')
        .style({
            raisingHeight: 600,  // 好像没效果..
            fontWeight: 800,
            // padding: 4,
            spacing: 2,
            stroke: 'pink',
            strokeWidth: 1,
        })


    // 点渲染为不同的形状颜色
    const pointShapeLayer = new PointLayer({ name: '点_形状_颜色' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('FullName', [
            'circle',
            'triangle',
            'square',
            'pentagon',
            'hexagon',
            'octogon',
            'hexagram',
            'rhombus',
            'vesica',
        ])
        .active(true)
        .size(20)
        .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            raisingHeight: 60,
            opacity: 0.7,
            // rotation: 90,
            stroke: '#fff',
            strokeWidth: 2,
            blur: 0.1
        })

    scene.addImage('img1', '/img/plane_yellow.svg')
    scene.addImage('img2', '/img/plane.jpg')
    // 点渲染为自定义图片
    const pointImgLayer = new PointLayer({ name: '点_图片' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('FullName', [
            'img1',
            'img2',
        ])
        .active({ color: '' })
        .size(16)
        // .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            raisingHeight: 50,
            opacity: 0.9,
        })

    // 点渲染为雷达
    const pointRadarLayer = new PointLayer({ name: '点_雷达' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('radar')
        .active(true)
        .animate(true)  //雷达图需设置animate(true) 
        .size('FullName', [16, 20, 24, 28])
        .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            opacity: 1,
            speed: 6,
        })

    // 点渲染为热力点
    const heatmapPointLayer = new HeatmapLayer({ name: '点_热力' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('heatmap')   //heatmap3D
        .size(1) // weight映射通道
        .style({
            intensity: 2,
            radius: 20,
            rampColors: {
                colors: ['#FF4818', '#000', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'].reverse(),
                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
            }
        })

    // 点渲染为垂直地图的柱子
    // type IColumn = 'cylinder' | 'triangleColumn' | 'hexagonColumn' | 'squareColumn';
    const pointColumnLayer = new PointLayer({ name: '点_柱子' })
        .source(data, {
            parser: {
                type: 'csv',
                x: 'Longitude',
                y: 'Latitude',
            },
        })
        .shape('FullName', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'])
        .active(true)
        .size('FullName', () => [10, 10, Math.ceil(100 * Math.random() + 50)])  //长 宽 高
        .animate({
            enable: true,
            speed: 0.015, // 生长速度，数值，默认为 `0.01`
            repeat: 1    //  生长动画的播放次数，数值，默认为 `1`
        })
        .color('FullName', ['#007bff', '#6610f2', '#6d49cb', '#e83e8c', '#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#ab6100', '#dd2b0e'])
        .style({
            opacity: 1,
            opacityLinear: {
                enable: true, // true - false
                dir: 'up', // up - down
            },
            lightEnable: false, //颜色是否参与光照计算

            // sourceColor: 'red',  // 底部颜色
            // targetColor: 'green' // 顶部颜色
        })

    scene.addLayer(pointRadarLayer);
    scene.addLayer(heatmapPointLayer);
    scene.addLayer(pointColumnLayer);
    scene.addLayer(pointLayer);
    scene.addLayer(pointTextLayer);
    scene.addLayer(pointShapeLayer);
    scene.addLayer(pointImgLayer);


    let layerSwitch: LayerSwitch = new LayerSwitch({
        multiple: false,
    });
    scene.addControl(layerSwitch)
}
</script>